<div class="ama-signal-ref-block">
    <div class="adf-property-label">{{ 'PROCESS_EDITOR.ELEMENT_PROPERTIES.SIGNAL' | translate }}</div>
    <button mat-stroked-button
            data-automation-id="new-signal-button"
            class="ama-add-signal-button"
            (click)="createNewSignal()"
            matTooltip="{{ 'PROCESS_EDITOR.ELEMENT_PROPERTIES.CREATE_NEW_SIGNAL' | translate }}"
            [matTooltipPosition]="'before'">
        <mat-icon>add</mat-icon>
    </button>
    <mat-form-field>
        <mat-select (selectionChange)="changeSignalRef()" [(ngModel)]="selectedSignal">
            <mat-option></mat-option>
            <mat-option *ngFor="let signal of signals" [value]="signal">
                {{ signal.name }}
            </mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field *ngIf="selectedSignal">
        <div class="adf-property-label">{{ 'PROCESS_EDITOR.ELEMENT_PROPERTIES.SIGNAL_NAME' | translate }}</div>
        <input matInput (change)="changeSignalRef()" [(ngModel)]="selectedSignal.name" />
    </mat-form-field>
</div>
